﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hui</title>
    <link href="../../../plugins/swiper/swiper.min.css" rel="stylesheet" />
    <link href="../../../css/Hui.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        @-webkit-keyframes scrollText1 {
            0% { -webkit-transform: translateY(0px); }
            20% { -webkit-transform: translateY(-40px); }
            40% { -webkit-transform: translateY(-80px); }
            60% { -webkit-transform: translateY(-120px); }
            80% { -webkit-transform: translateY(-160px); }
            100% { -webkit-transform: translateY(-200px); }
        }

        @keyframes scrollText1 {
            0% { transform: translateY(0px); }
            20% { transform: translateY(-40px); }
            40% { transform: translateY(-80px); }
            60% { transform: translateY(-120px); }
            80% { transform: translateY(-160px); }
            100% { transform: translateY(-200px); }
        }

        .border3 { top: 0px; -webkit-animation: scrollText1 8s infinite cubic-bezier(1,0,0.5,0); animation: scrollText1 8s infinite cubic-bezier(1,0,0.5,0); }
        .border3:hover { animation-play-state: paused; -webkit-animation-play-state: paused; }
    </style>
</head>
<body>
    <!--
        作者：じ追※忆づ 1315723390@qq.com
        时间：2016-05-09
        描述：轮播图
    -->
    <div style="height: 130px;" class="H-overflow-hidden H-margin-horizontal-both-5">
        <div class="swiper-container H-width-100-percent H-height-100-percent">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../../../image/templates-imgs/liren1.png" class="H-width-100-percent H-height-100-percent" /></div>
                <div class="swiper-slide"><img src="../../../image/templates-imgs/liren2.png" class="H-width-100-percent H-height-100-percent" /></div>
                <div class="swiper-slide"><img src="../../../image/templates-imgs/liren3.png" class="H-width-100-percent H-height-100-percent" /></div>
            </div>
            <div class="swiper-pagination" style="bottom:0!important"></div>
        </div>
    </div>
    <!--
            作者：じ追※忆づ 1315723390@qq.com
            时间：2016-05-09
            描述：手部美甲图文卡片
        -->
    <div class="H-padding-vertical-top-5"></div>
    <div class="H-margin-horizontal-both-5">
        <div class="H-flexbox-horizontal H-theme-background-color-white H-border-vertical-bottom-after">
            <div class="H-padding-vertical-both-10"><img src="../../../image/templates-imgs/shou.png" alt="" title="" class="H-display-block H-margin-horizontal-left-10" style="width: 70px; height: 70px;" /></div>
            <div class="H-flex-item H-padding-10">
                <div class="H-flexbox-horizontal">
                    <div class="H-flex-item H-font-weight-500 H-text-show-row-1">
                        手部美甲
                        <span class="H-theme-background-color-red H-theme-font-color-white H-font-size-15 ">热门</span>
                    </div>
                    <div class="H-vertical-middle">
                        <span class="H-font-size-15 H-theme-font-color-red ">99<label class="H-theme-font-color-999 H-font-size-15">元起</label></span>
                    </div>
                </div>

                <div class="H-font-size-12 H-theme-font-color-999 H-text-show-row-2 H-margin-vertical-top-2">匠心独具，专业甲艺设计，扮靓指尖盛宴</div>
                <div class="H-font-size-12 H-theme-font-color-999 H-text-show-row-2 H-margin-vertical-top-2">每周甲样更新</div>
            </div>
        </div>
    </div>
    <!--
        作者：じ追※忆づ 1315723390@qq.com
        时间：2016-05-09
        描述：两列图文卡片
    -->
    <div class="H-padding-vertical-top-5"></div>
    <div class="H-margin-horizontal-both-5 H-margin-vertical-bottom-5">
        <div class="H-flexbox-horizontal H-box-sizing-border-box">
            <div class="H-flex-item H-flexbox-horizontal H-box-sizing-border-box H-padding-10 H-theme-background-color-white H-margin-horizontal-right-5 H-text-show-row-1 H-touch-active">
                <div class="H-overflow-hidden H-vertical-middle"><img src="../../../image/templates-imgs/zu.png" alt="" title="" class="H-display-block" style="width: 60px; height: 60px;" /></div>
                <div class="H-flex-item H-text-show-row-1 H-padding-horizontal-both-5">
                    <span class="H-display-block H-text-show-row-1 H-font-size-13">足部美甲</span>
                    <span class="H-display-block H-font-weight-500 H-font-size-12 H-theme-font-color-999 H-text-show-row-1">订制足尖的美</span>
                    <span class="H-display-block H-text-show-row-1 H-font-size-12 H-theme-font-color-red">129<label class="H-font-size-12 H-theme-font-color-999">元起</label></span>

                </div>
            </div>
            <div class="H-flex-item H-flexbox-horizontal H-box-sizing-border-box H-padding-10 H-theme-background-color-white  H-text-show-row-1 H-touch-active">
                <div class="H-overflow-hidden H-vertical-middle"><img src="../../../image/templates-imgs/jie.png" alt="" title="" class="H-display-block" style="width: 60px; height: 60px;" /></div>
                <div class="H-flex-item H-text-show-row-1 H-padding-horizontal-both-5">
                    <span class="H-display-block H-text-show-row-1 H-font-size-13">美睫</span>
                    <span class="H-display-block H-font-weight-500 H-font-size-12 H-theme-font-color-999 H-text-show-row-1">高端无痕嫁接</span>
                    <span class="H-display-block H-text-show-row-1 H-font-size-12 H-theme-font-color-red">99<label class="H-font-size-12 H-theme-font-color-999">元起</label></span>

                </div>
            </div>
        </div>
    </div>

    <div class="H-margin-horizontal-both-5 H-margin-vertical-both-5">
        <div class="H-flexbox-horizontal H-box-sizing-border-box">
            <div class="H-flex-item H-flexbox-horizontal H-box-sizing-border-box H-padding-10 H-theme-background-color-white H-margin-horizontal-right-5 H-text-show-row-1 H-touch-active">
                <div class="H-overflow-hidden H-vertical-middle"><img src="../../../image/templates-imgs/xiejia.png" alt="" title="" class="H-display-block" style="width: 60px; height: 60px;" /></div>
                <div class="H-flex-item H-text-show-row-1 H-padding-horizontal-both-5">
                    <span class="H-display-block H-text-show-row-1 H-font-size-13">修护卸甲</span>
                    <span class="H-display-block H-font-weight-500 H-font-size-12 H-theme-font-color-999 H-text-show-row-1">精致呵护手足</span>
                    <span class="H-display-block H-text-show-row-1 H-font-size-12 H-theme-font-color-red">79<label class="H-font-size-12 H-theme-font-color-999">元起</label></span>

                </div>
            </div>


            <div class="H-flex-item H-flexbox-horizontal H-box-sizing-border-box H-padding-10 H-theme-background-color-white  H-text-show-row-1 H-touch-active">
                <div class="H-overflow-hidden H-vertical-middle"><img src="../../../image/templates-imgs/hua.png" alt="" title="" class="H-display-block" style="width: 60px; height: 60px;" /></div>
                <div class="H-flex-item H-text-show-row-1 H-padding-horizontal-both-5">
                    <span class="H-display-block H-text-show-row-1 H-font-size-13">化妆</span>
                    <span class="H-display-block H-font-weight-500 H-font-size-12 H-theme-font-color-999 H-text-show-row-1">呈现完美妆容</span>
                    <span class="H-display-block H-text-show-row-1 H-font-size-12 H-theme-font-color-red">168<label class="H-font-size-12 H-theme-font-color-999">元起</label></span>

                </div>
            </div>
        </div>
    </div>

    <div class="H-margin-horizontal-both-5 H-margin-vertical-both-5">
        <div class="H-flexbox-horizontal H-box-sizing-border-box">
            <div class="H-flex-item H-flexbox-horizontal H-box-sizing-border-box H-padding-10 H-theme-background-color-white H-margin-horizontal-right-5 H-text-show-row-1 H-touch-active">
                <div class="H-overflow-hidden H-vertical-middle"><img src="../../../image/templates-imgs/mei.png" alt="" title="" class="H-display-block" style="width: 60px; height: 60px;" /></div>
                <div class="H-flex-item H-text-show-row-1 H-padding-horizontal-both-5">
                    <span class="H-display-block H-text-show-row-1 H-font-size-13">美容</span>
                    <span class="H-display-block H-font-weight-500 H-font-size-12 H-theme-font-color-999 H-text-show-row-1">呵护你的美丽</span>
                    <span class="H-display-block H-text-show-row-1 H-font-size-12 H-theme-font-color-red">99<label class="H-font-size-12 H-theme-font-color-999">元起</label></span>

                </div>
            </div>

            <div class="H-flex-item H-flexbox-horizontal H-box-sizing-border-box H-padding-10 H-theme-background-color-white  H-text-show-row-1 H-touch-active">
                <div class="H-overflow-hidden H-vertical-middle"><img src="../../../image/templates-imgs/meit.png" alt="" title="" class="H-display-block" style="width: 60px; height: 60px;" /></div>
                <div class="H-flex-item H-text-show-row-1 H-padding-horizontal-both-5">
                    <span class="H-display-block H-text-show-row-1 H-font-size-13">美体</span>
                    <span class="H-display-block H-font-weight-500 H-font-size-12 H-theme-font-color-999 H-text-show-row-1">让身体水嫩嫩</span>
                    <span class="H-display-block H-text-show-row-1 H-font-size-12 H-theme-font-color-red">58<label class="H-font-size-12 H-theme-font-color-999">元起</label></span>

                </div>
            </div>
        </div>
    </div>

    <div class="H-margin-horizontal-both-5 H-margin-vertical-both-5">
        <div class="H-flexbox-horizontal H-box-sizing-border-box">
            <div class="H-flex-item H-flexbox-horizontal H-box-sizing-border-box H-padding-10 H-theme-background-color-white H-margin-horizontal-right-5 H-text-show-row-1 H-touch-active">
                <div class="H-overflow-hidden H-vertical-middle"><img src="../../../image/templates-imgs/su.png" alt="" title="" class="H-display-block" style="width: 60px; height: 60px;" /></div>
                <div class="H-flex-item H-text-show-row-1 H-padding-horizontal-both-5">
                    <span class="H-display-block H-text-show-row-1 H-font-size-13">塑性</span>
                    <span class="H-display-block H-font-weight-500 H-font-size-12 H-theme-font-color-999 H-text-show-row-1">打造S型曲线</span>
                    <span class="H-display-block H-text-show-row-1 H-font-size-12 H-theme-font-color-red">168<label class="H-font-size-12 H-theme-font-color-999">元起</label></span>

                </div>
            </div>

            <div class="H-flex-item H-flexbox-horizontal H-box-sizing-border-box H-padding-10 H-theme-background-color-white  H-text-show-row-1 H-touch-active">
                <div class="H-overflow-hidden H-vertical-middle"><img src="../../../image/templates-imgs/yang.png" alt="" title="" class="H-display-block" style="width: 60px; height: 60px;" /></div>
                <div class="H-flex-item H-text-show-row-1 H-padding-horizontal-both-5">
                    <span class="H-display-block H-text-show-row-1 H-font-size-13">养生护理</span>
                    <span class="H-display-block H-font-weight-500 H-font-size-12 H-theme-font-color-999 H-text-show-row-1">疏经活血减压</span>
                    <span class="H-display-block H-text-show-row-1 H-font-size-12 H-theme-font-color-red">78<label class="H-font-size-12 H-theme-font-color-999">元起</label></span>

                </div>
            </div>
        </div>
    </div>
    <!--
        作者：じ追※忆づ1315723390@qq.com
        时间：2016-05-10
        描述：flex布局风格样式
    -->
    <div class="H-margin-horizontal-both-5 H-margin-vertical-both-5">


        <div class="H-display-table H-width-100-percent H-theme-background-color-white">
            <div class="H-display-table-cell H-width-avg-2 H-border-vertical-both-after H-border-horizontal-both-after H-vertical-align-middle">
                <div class="H-flexbox-horizontal H-center-all">
                    <div class="H-flex-item H-padding-10">
                        <div class="H-flexbox-horizontal">
                            <div class="H-flex-item H-font-weight-500 H-font-size-14 H-text-show-row-1 "> 格子爱</div>
                        </div>
                        <div class="H-font-size-12 H-theme-font-color-999 H-text-show-row-1 H-margin-vertical-top-2">百搭不挑人</div>
                    </div>
                    <div class="H-padding-vertical-both-10 H-center-all H-padding-horizontal-right-5"><img src="../../../image/templates-imgs/jia.png" alt="" title="" class="H-display-block H-margin-horizontal-left-10 " style="width: 60px; height: 60px;" /></div>
                </div>
            </div>
            <div class="H-display-table-cell H-width-avg-2 H-border-vertical-both-after H-border-horizontal-right-after ">
                <div class="H-box-sizing-content-box H-border-vertical-bottom-after H-width-100-percent">
                    <div class="H-flexbox-horizontal H-border-vertical-bottom-after">
                        <div class="H-flex-item H-padding-10">
                            <div class="H-flexbox-horizontal">
                                <div class="H-flex-item H-font-weight-500 H-font-size-12 H-text-show-row-1 ">本周上新</div>
                            </div>
                            <div class="H-font-size-10 H-theme-font-color-999 H-text-show-row-1 H-margin-vertical-top-2">爱豆系列</div>
                        </div>
                        <div class="H-padding-vertical-both-10 H-center-all H-padding-horizontal-right-5"><img src="../../../image/templates-imgs/dou.png" alt="" title="" class="H-display-block H-margin-horizontal-left-10 " style="width: 30px; height: 30px;" /></div>
                    </div>
                </div>
                <div class="H-box-sizing-content-box H-border-vertical-bottom-after H-width-100-percent">
                    <div class="H-flexbox-horizontal H-border-vertical-bottom-after">
                        <div class="H-flex-item H-padding-10">
                            <div class="H-flexbox-horizontal">
                                <div class="H-flex-item H-font-weight-500 H-font-size-12 H-text-show-row-1 ">美甲福利院</div>
                            </div>
                            <div class="H-font-size-10 H-theme-font-color-999 H-text-show-row-1 H-margin-vertical-top-2">领个礼包约美甲</div>
                        </div>
                        <div class="H-padding-vertical-both-10 H-center-all H-padding-horizontal-right-5"><img src="../../../image/templates-imgs/youhui.png" alt="" title="" class="H-display-block H-margin-horizontal-left-10 " style="width: 30px; height: 30px;" /></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="H-position-relative H-width-100-percent H-height-40 H-box-sizing-content-box H-flexbox-horizontal H-overflow-hidden H-border-horizontal-both-after H-border-vertical-bottom-after H-theme-background-color-white">
            <div class="H-box-sizing-content-box H-center-all H-font-size-14 ">
                美丽小贴士：
            </div>
            <div class="border3 H-font-size-12">
                <div class="H-box-sizing-content-box H-flex-item H-text-align-center H-center-all H-height-40 ">感谢<span class="H-theme-font-color-red">贝多芬</span>的指导!</div>
                <div class="H-box-sizing-content-box H-flex-item H-text-align-center H-center-all H-height-40">感谢<span class="H-theme-font-color-red">新生帝</span>!</div>
                <div class="H-box-sizing-content-box H-flex-item H-text-align-center H-center-all H-height-40">感谢<span class="H-theme-font-color-red">Hui</span>!</div>
                <div class="H-box-sizing-content-box H-flex-item H-text-align-center H-center-all H-height-40">This is a test 4.</div>
                <div class="H-box-sizing-content-box H-flex-item H-text-align-center H-center-all H-height-40">This is a test 5.</div>
                <div class="H-box-sizing-content-box H-flex-item H-text-align-center H-center-all H-height-40">This is a test 1.</div>
            </div>
        </div>
    </div>
    <!--
            作者：じ追※忆づ 1315723390@qq.com
            时间：2016-05-09
            描述：精品推荐部分
        -->
    <div class="H-margin-horizontal-both-5">
        <div class="H-flexbox-horizontal H-border-vertical-bottom-after H-theme-background-color-white">
            <div class="H-flex-item H-padding-10">
                <div class="H-font-size-14 H-theme-font-color-999 H-text-show-row-2 H-margin-vertical-top-2">精品推荐</div>
            </div>
        </div>

        <div class="H-flexbox-horizontal H-theme-background-color-white H-border-vertical-bottom-after">
            <div class="H-padding-vertical-both-10 H-center-all"><img src="../../../image/templates-imgs/meijia.png" alt="" title="" class="H-display-block H-margin-horizontal-left-10 " style="width: 70px; height: 70px;" /></div>
            <div class="H-flex-item H-padding-10">
                <div class="H-flexbox-horizontal">
                    <div class="H-flex-item H-font-weight-500 H-text-show-row-1">
                        花之梦
                        <span class="H-theme-background-color-red H-theme-font-color-white H-font-size-12 ">热门精品</span>
                    </div>
                    <div class="H-vertical-middle">
                        <span class="H-font-size-12 H-theme-font-color-red ">176<label class="H-theme-font-color-999 H-font-size-12">元</label></span>
                    </div>
                </div>

                <div class="H-font-size-12 H-theme-font-color-999 H-text-show-row-1 H-margin-vertical-top-2">颜值就是这么高!再不选那就是你的错了</div>
                <div class="H-font-size-12 H-theme-font-color-999 H-text-show-row-1 H-margin-vertical-top-2">
                    <i class="H-iconfont H-icon-star-fill H-theme-font-color-red H-font-size-10 H-margin-horizontal-right-5"></i>
                    <i class="H-iconfont H-icon-star-fill H-theme-font-color-red H-font-size-10 H-margin-horizontal-right-5"></i>
                    <i class="H-iconfont H-icon-star-fill H-theme-font-color-red H-font-size-10 H-margin-horizontal-right-5"></i>
                    <i class="H-iconfont H-icon-star-fill H-theme-font-color-red H-font-size-10 H-margin-horizontal-right-5"></i>
                    <i class="H-iconfont H-icon-star-half H-theme-font-color-red H-font-size-10 H-margin-horizontal-right-5"></i>
                </div>
            </div>
        </div>
        <div class="H-flexbox-horizontal H-theme-background-color-white H-border-vertical-bottom-after">
            <div class="H-padding-vertical-both-10 H-center-all"><img src="../../../image/templates-imgs/meijia1.png" alt="" title="" class="H-display-block H-margin-horizontal-left-10 " style="width: 70px; height: 70px;" /></div>
            <div class="H-flex-item H-padding-10">
                <div class="H-flexbox-horizontal">
                    <div class="H-flex-item H-font-weight-500 H-text-show-row-1">
                        时尚迷彩
                        <span class="H-theme-background-color-red H-theme-font-color-white H-font-size-12 ">热门精品</span>
                    </div>
                    <div class="H-vertical-middle">
                        <span class="H-font-size-12 H-theme-font-color-red ">219<label class="H-theme-font-color-999 H-font-size-12">元</label></span>
                    </div>
                </div>

                <div class="H-font-size-12 H-theme-font-color-999 H-text-show-row-1 H-margin-vertical-top-2">让这款元素UP你的养眼值</div>
                <div class="H-font-size-12 H-theme-font-color-999 H-text-show-row-1 H-margin-vertical-top-2">
                    <i class="H-iconfont H-icon-star-fill H-theme-font-color-red H-font-size-10 H-margin-horizontal-right-5"></i>
                    <i class="H-iconfont H-icon-star-fill H-theme-font-color-red H-font-size-10 H-margin-horizontal-right-5"></i>
                    <i class="H-iconfont H-icon-star-fill H-theme-font-color-red H-font-size-10 H-margin-horizontal-right-5"></i>
                    <i class="H-iconfont H-icon-star-fill H-theme-font-color-red H-font-size-10 H-margin-horizontal-right-5"></i>
                    <i class="H-iconfont H-icon-star-half H-theme-font-color-red H-font-size-10 H-margin-horizontal-right-5"></i>
                </div>
            </div>
        </div>
        <div class="H-flexbox-horizontal H-theme-background-color-white H-border-vertical-bottom-after">
            <div class="H-padding-vertical-both-10 H-center-all"><img src="../../../image/templates-imgs/meijia2.png" alt="" title="" class="H-display-block H-margin-horizontal-left-10 " style="width: 70px; height: 70px;" /></div>
            <div class="H-flex-item H-padding-10">
                <div class="H-flexbox-horizontal">
                    <div class="H-flex-item H-font-weight-500 H-text-show-row-1">
                        EXO
                        <span class="H-theme-background-color-red H-theme-font-color-white H-font-size-12 ">热门精品</span>
                    </div>
                    <div class="H-vertical-middle">
                        <span class="H-font-size-12 H-theme-font-color-red ">179<label class="H-theme-font-color-999 H-font-size-12">元</label></span>
                    </div>
                </div>
                <div class="H-font-size-12 H-theme-font-color-999 H-text-show-row-1 H-margin-vertical-top-2">Fans们看过来,这款优雅的追爱豆</div>
                <div class="H-font-size-12 H-theme-font-color-999 H-text-show-row-1 H-margin-vertical-top-2">
                    <i class="H-iconfont H-icon-star-fill H-theme-font-color-red H-font-size-10 H-margin-horizontal-right-5"></i>
                    <i class="H-iconfont H-icon-star-fill H-theme-font-color-red H-font-size-10 H-margin-horizontal-right-5"></i>
                    <i class="H-iconfont H-icon-star-fill H-theme-font-color-red H-font-size-10 H-margin-horizontal-right-5"></i>
                    <i class="H-iconfont H-icon-star-fill H-theme-font-color-red H-font-size-10 H-margin-horizontal-right-5"></i>
                    <i class="H-iconfont H-icon-star-half H-theme-font-color-red H-font-size-10 H-margin-horizontal-right-5"></i>
                </div>
            </div>
        </div>
        <div class="H-flexbox-horizontal H-theme-background-color-white H-border-vertical-bottom-after">
            <div class="H-padding-vertical-both-10 H-center-all"><img src="../../../image/templates-imgs/meijia3.png" alt="" title="" class="H-display-block H-margin-horizontal-left-10 " style="width: 70px; height: 70px;" /></div>
            <div class="H-flex-item H-padding-10">
                <div class="H-flexbox-horizontal">
                    <div class="H-flex-item H-font-weight-500 H-text-show-row-1">
                        格子爱
                        <span class="H-theme-background-color-red H-theme-font-color-white H-font-size-12 ">热门精品</span>
                    </div>
                    <div class="H-vertical-middle">
                        <span class="H-font-size-12 H-theme-font-color-red ">196<label class="H-theme-font-color-999 H-font-size-12">元</label></span>
                    </div>
                </div>
                <div class="H-font-size-12 H-theme-font-color-999 H-text-show-row-1 H-margin-vertical-top-2">百搭不挑人,日常完美搭配</div>
                <div class="H-font-size-12 H-theme-font-color-999 H-text-show-row-1 H-margin-vertical-top-2">
                    <i class="H-iconfont H-icon-star-fill H-theme-font-color-red H-font-size-10 H-margin-horizontal-right-5"></i>
                    <i class="H-iconfont H-icon-star-fill H-theme-font-color-red H-font-size-10 H-margin-horizontal-right-5"></i>
                    <i class="H-iconfont H-icon-star-fill H-theme-font-color-red H-font-size-10 H-margin-horizontal-right-5"></i>
                    <i class="H-iconfont H-icon-star-fill H-theme-font-color-red H-font-size-10 H-margin-horizontal-right-5"></i>
                    <i class="H-iconfont H-icon-star-half H-theme-font-color-red H-font-size-10 H-margin-horizontal-right-5"></i>
                </div>
            </div>
        </div>
    </div>
    <script src="../../../plugins/swiper/swiper.min.js"></script>
    <script src="../../../script/H.js" type="text/javascript"></script>
    <script type="text/javascript">
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            autoplay: 3000,
        });
    </script>
</body>
</html>
